<template>
    <div class="main"  style="width: 100%;height:100%;border:1px solid #E0E0E0;">
        <div class="main-title" style="width: 100%;height: 20px;background: #E0E0E0;padding-left: 8px;padding-right: 8px;">
            数据检索
            <div style="float: right;" @click="shuruclose()">X </div>
        
        </div>
        <div style="width: 100%;height: calc(100% - 20px); overflow-y: auto">
        <vxe-table border 
        ref="tableRef" 
        :row-config="{ isCurrent: true }" 
        :edit-config="{ mode: 'cell', trigger: 'click' }"
        :data="datalist"  style="width: 100%;height :100%;">
        <vxe-column type="seq" title="序号" width="40" />
        <vxe-column v-for="(item,index) in datalistlabel" :field="item.value" :title="item.label" :width="item.widths" />
        </vxe-table>

        </div>
        
    </div> 

   
    
</template>

<script setup>
import { styleType } from 'element-plus/es/components/table-v2/src/common.mjs';
import { ref,inject, onMounted } from 'vue';
//1.定义变量
//datalist传进来的搜索候选框的值
const datalist = ref([

    {jm:'ptt1',mc:'葡萄糖1',jm1:'ptt11',mc1:'葡萄糖11'},
    {jm:'ptt2',mc:'葡萄糖2',jm1:'ptt21',mc1:'葡萄糖21'},
    {jm:'ptt3',mc:'葡萄糖3',jm1:'ptt31',mc1:'葡萄糖31'},
    
    {jm:'ptt1',mc:'葡萄糖1',jm1:'ptt11',mc1:'葡萄糖11'},
    {jm:'ptt2',mc:'葡萄糖2',jm1:'ptt21',mc1:'葡萄糖21'},
    {jm:'ptt3',mc:'葡萄糖3',jm1:'ptt31',mc1:'葡萄糖31'},
    
    {jm:'ptt1',mc:'葡萄糖1',jm1:'ptt11',mc1:'葡萄糖11'},
    {jm:'ptt2',mc:'葡萄糖2',jm1:'ptt21',mc1:'葡萄糖21'},
    {jm:'ptt3',mc:'葡萄糖3',jm1:'ptt31',mc1:'葡萄糖31'},
    {jm:'ptt3',mc:'葡萄糖3',jm1:'ptt31',mc1:'葡萄糖31'},
    
    {jm:'ptt1',mc:'葡萄糖1',jm1:'ptt11',mc1:'葡萄糖11'},
    {jm:'ptt2',mc:'葡萄糖2',jm1:'ptt21',mc1:'葡萄糖21'},
    {jm:'ptt3',mc:'葡萄糖3',jm1:'ptt31',mc1:'葡萄糖31'}

]);
//2.传入每个字段及中文意思以及没列的宽度值
const datalistlabel = ref([
    {value:'jm',label:'简码',widths:'14%'},
    {value:'mc',label:'名称',widths:'25%'},
    {value:'jm1',label:'简码1',widths:'25%'},
    {value:'mc1',label:'名称11',widths:'25%'}
]);




//3.一级组件跨层级传的修改一级组件显示值的方法
const isshowufun=inject('isshowsousearchfunkey');

//点输入框关闭按钮的时候触发这个方法
const shuruclose=()=>{
    console.log('关闭了')
    
    isshowufun( false, '0', '0')
}


//搜索框的数据源


const DataSource=inject('DataSourceKey');
onMounted(()=>{
    // datalist.value=DataSource.value;
   
    console.log(DataSource);
    
})



</script>

<style lang='scss' scoped></style>
